<template>
    <up-list @scrolltolower="scrolltolower">
        <up-empty :iconSize="150" mode="order" text="当前暂无配载单" v-if="orderList.length === 0"></up-empty>
        <up-list-item v-for="item in orderList" :key="item.id">
            <view class="header-huoyuan">
                <view class="huoyuan-all">
                    <view class="all-1">
                        所属项目：{{ item.projectName }}
                    </view>
                    <view class="orderId">
                        <up-copy :content="item.billId">
                            <text>订单号:{{ item.billId }}</text>
                        </up-copy>
                    </view>
                    <view class="orderId">
                        <up-copy :content="item.billNo">
                            <text>配载单号:{{ item.billNo }}</text>
                        </up-copy>
                    </view>
                    <view class="all-box">
                        <view class="all-left">
                            <view class="all-2">
                                装货时间：{{ item.shipmentStartTime }}
                            </view>
                            <view class="all-3">
                                <view class="left-3">
                                    <view class="left-3-1">
                                        <view class="all-3-1">
                                            装
                                        </view>
                                        <view class="all-3-2">
                                            {{
                                                item.shipperaddress ? item.shipperaddress : showAddress(item,
                                                    'initialAddress')
                                            }}
                                        </view>
                                    </view>
                                    <view class="left-3-2">
                                        <image src="/static/images/icon/juli.png" mode=""></image>
                                        <view class="left-3-2-2" v-if="item.billMode == 'APPOINT'">
                                            指派模式
                                        </view>
                                        <view class="left-3-2-2" v-if="item.billMode == 'GRAB'">
                                            抢单模式
                                        </view>
                                    </view>
                                    <view class="left-3-3">
                                        <view class="all-3-3-1">
                                            卸
                                        </view>
                                        <view class="all-3-3-2">
                                            {{
                                                item.consigneeaddress ? item.consigneeaddress : showAddress(item,
                                                    'endAddress')
                                            }}
                                        </view>
                                    </view>
                                </view>
                                <view class="right-3">
                                    <view class="right-3-1">
                                        {{ item.goodsName }}
                                    </view>
                                </view>

                            </view>
                            <view class="all-4">
                                <view class="all-4-1">
                                    {{ item.goodsCountShow }}
                                </view>
                                <view class="all-2">
                                    结束时间：{{ item.shipmentEndTime }}
                                </view>
                            </view>
                        </view>
                        <view v-if="item.status == 'RECEIVED_ORDER' && role === 'driver'" class="all-right"
                            @click="ReceingOrders(item, '起运')">
                            <view class="right-text">
                                起运
                            </view>
                        </view>
                        <view v-if="item.status == 'PROGRESS' && role === 'driver'" class="all-right"
                            @click="ReceingOrders(item, '到达')">
                            <view class="right-text">
                                到达
                            </view>
                        </view>
                        <!-- <view v-if="item.status == 'PROGRESS' && role === 'driver'" style="display: flex;justify-content: space-around;
							align-items: center;flex-direction: column;">
							<view class="right-text" style="background-color: #1e90ff;height: 80px;width: 50px;display: flex;
									justify-content: center;align-items: center;color: #fff;" @click="ReceingOrders(item, '到达')">
								到达
							</view>
							<view class="right-text" style="background-color: aquamarine;height: 80px;width: 50px;display: flex;
									justify-content: center;align-items: center;color: #fff;" @click="goPosition(item)">
								轨迹
							</view>
						</view> -->
                        <view
                            v-if="(item.status == 'COMPLETED' || item.status == 'UPLOAD_RECEIPT') && role === 'driver'"
                            class="all-right" @click="ReceingOrders(item, '上传回单')">
                            <view class="right-text">
                                回单
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </up-list-item>
        <LoadMore :status="status" v-if="orderList.length !== 0"></LoadMore>
    </up-list>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import LoadMore from "@/components/LoadMore.vue"
import {
    getWaybillClock,
    DepartureWaybill,
    ReachWaybill,
    receiptWaybill
} from "@/api/driver"
import {
    ref,
    type PropType
} from "vue"
import {
    useUserStore
} from '@/store/modules/user'
import {
    storeToRefs
} from "pinia"


const emit = defineEmits(['HitBottom', "reLoad"])


/* hooks */
const {
    role
} = storeToRefs(useUserStore())


/* 数据 */
const {
    orderList,
    status
} = defineProps({
    orderList: {
        type: Array as PropType<any[]>,
        default: []
    },
    status: {
        type: String as PropType<"loadmore" | "nomore" | "loading" | undefined>,
        default: "loadmore"
    },
    getListParams: {
        type: Object,
        default: {
            currPage: 1,
            limit: 10,
            status: 'RECEIVED_ORDER'
        }
    },
    hasNextPage: {
        type: Boolean,
        default: false
    }
})

const uToastRef = ref<any>(null)

/* 函数 */
// 没有详细地址时显示省市区
const showAddress = (item: any, str: string) => {
    let address = JSON.parse(item[str])
    return address.provinceText + address.cityText + address.countyText + (address.text ? address.text : '')
}
// 地图
const goPosition = (item: any) => {
    uni.navigateTo({
        url: `/pages/mine/position/map?endAddress=${item.endAddress}&id=${item.id}`
    })
}
// 触底刷新
const scrolltolower = () => {
    emit('HitBottom')
}
const ReceingOrders = async (item: any, name: string) => {
    const params = {
        id: item.id,
        text: name
    }
    uToastRef.value?.show({
        message: '请稍等...',
        type: 'loading',
        duration: -1
    })
    const res = await getWaybillClock(params)
    uToastRef.value?.hide()
    if (res.success) {
        const data = res.data
        // 检查三个字段中是否有至少一个为1
        if (data.shippedNum == '1' || data.receiptedNum == '1' || data.relevantPic == '1') {
            let dataList = {
                shippedNum: data.shippedNum,
                receiptedNum: data.receiptedNum,
                relevantPic: data.relevantPic,
            }
            let flag = item.status === 'COMPLETED' ? 0 : 1
            // 有字段为1，跳转页面
            uni.navigateTo({
                url: '/pages/work/checkVerification?item=' +
                    JSON.stringify(item) + '&text=' + name + '&dataList=' + JSON.stringify(dataList) + '&flag=' + flag
            })
        } else {
            // 三个字段都不为1，做其他处理
            handleNoValidFields(item, name)
        }
    }
}
// 三个字段都不为1时的处理
const handleNoValidFields = async (item: any, name: string) => {
    // 或者执行其他业务逻辑
    console.log('三个字段都不为1，执行其他处理', item, name)
    let params = {
        id: item.id,
        text: name,
        goodsCount: item.goodsCount
    }
    console.log(params)
    if (name == '起运') {
        console.log(1);
        uToastRef.value?.show({
            message: '起运中，请稍等...',
            type: 'loading',
            duration: -1
        })
        let res = await DepartureWaybill(params)
        uToastRef.value?.hide()
        if (res.success) {
            uToastRef.value?.show({
                position: "top",
                message: '配货单已起运',
                type: 'success',
                duration: 1000,
                complete() {
                    emit('reLoad')
                }
            })
        }
    } else if (name == '到达') {
        console.log(2)
        uToastRef.value?.show({
            message: '请稍等...',
            type: 'loading',
            duration: -1
        })
        let res = await ReachWaybill(params)
        uToastRef.value?.hide()
        if (res.success) {
            uToastRef.value?.show({
                position: "top",
                message: '配货单已到达',
                type: 'success',
                duration: 1000,
                complete() {
                    emit('reLoad')
                }
            })
        }
    } else if (name == '上传回单') {
        console.log(3)
        uToastRef.value?.show({
            message: '请稍等...',
            type: 'loading',
            duration: -1
        })
        let res = await receiptWaybill(params)
        uToastRef.value?.hide()
        if (res.success) {
            uToastRef.value?.show({
                position: "top",
                message: '配货单已上传回单',
                type: 'success',
                duration: 1000,
                complete() {
                    emit('reLoad')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.header-huoyuan {

    background-color: aliceblue;

    .huoyuan-all {
        margin: 10px 0 10px 18px;
        padding: 15px 0 5px 0;

        .all-1 {
            font-size: 16px;
            font-weight: 400;
            margin: 0 0 7px 0;
        }

        .all-box {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;

            .all-left {

                .all-2 {
                    color: #999;
                }

                .all-3 {
                    display: flex;
                    margin-top: 12px;

                    .left-3 {
                        width: 180px;
                        margin-right: 10px;

                        .left-3-1 {
                            display: flex;

                            .all-3-1 {
                                background-color: green;
                                color: white;
                                border-radius: 50%;
                                padding: 4px 7px;
                                font-size: 15px;
                                margin-right: 18rpx;
                                height: 30px;
                            }

                            .all-3-2 {
                                font-size: 15px;
                                align-content: center;
                            }
                        }

                        .left-3-2 {
                            display: flex;
                            margin: 20px 0;

                            image {
                                width: 20px;
                                height: 20px;
                                margin-right: 20px;
                            }

                            .left-3-2-2 {
                                align-content: center;
                            }
                        }

                        .left-3-3 {
                            display: flex;

                            .all-3-3-1 {
                                background-color: red;
                                color: white;
                                border-radius: 50%;
                                padding: 4px 7px;
                                font-size: 15px;
                                margin-right: 18rpx;
                                height: 30px;
                            }

                            .all-3-3-2 {
                                font-size: 15px;
                                align-content: center;
                            }
                        }
                    }

                    .right-3 {
                        padding: 5px;

                        .right-3-1 {
                            color: dodgerblue;
                            font-size: 15px;
                            margin-bottom: 4px;
                        }

                        .right-3-2 {
                            font-size: 10px;
                            color: #999;
                            margin-bottom: 4px;
                        }

                        .right-3-3 {
                            display: flex;

                            .right-3-3-0 {
                                font-size: 9px;
                                color: #999;
                                align-content: center;
                                margin-right: 2px;
                            }

                            .right-3-3-1 {
                                color: red;
                                font-size: 18px;
                                margin-right: 5px;
                                font-weight: 500;
                            }

                            .right-3-3-2 {
                                font-size: 9px;
                                color: #999;
                                align-content: center
                            }
                        }
                    }
                }

                .all-4 {
                    display: flex;
                    margin-top: 20px;
                    align-items: center;

                    .all-4-1 {
                        color: #999;
                        font-size: 12px;
                        margin-right: 13px;
                    }

                    .all-4-2 {
                        display: flex;
                        color: red;

                        .all-4-2-1 {
                            align-content: center;

                            image {
                                width: 15px;
                                height: 15px;
                                margin-right: 5px;
                                line-height: 5px;
                            }
                        }

                        .all-4-2-2 {
                            align-content: center;
                        }

                    }
                }
            }

            .all-right {
                background-color: dodgerblue;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50px;

                .right-text {
                    color: white;
                    font-size: 17px;
                    text-align: center;
                }
            }
        }

        .orderId {
            color: #999;
            font-size: 16px;
            margin-bottom: 5px;
        }
    }
}
</style>